<!DOCTYPE >
<html  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <th:block th:include="header.html"></th:block>
    <title>Basic Bar Chart</title>
</head>
<body class="container" style="height: auto;overflow: hidden;">
<div id="chart" style="height: 500px;"></div>
</body>
<script type="text/javascript">
    $(function() {
        showchart();
    })
    function showchart() {
        var echart = echarts.init(document.getElementById('chart'));
        echart.clear();
        echart.showLoading();
        var option = {
            title: {
                text: '漏斗图',
                    subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data: ['展现','点击','访问','咨询','订单']
            },

            series: [
                {
                    name:'漏斗图',
                    type:'funnel',
                    left: '10%',
                    top: 60,
                    //x2: 80,
                    bottom: 60,
                    width: '80%',
                    // height: {totalHeight} - y - y2,
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    data: [
                        {value: 60, name: '访问'},
                        {value: 40, name: '咨询'},
                        {value: 20, name: '订单'},
                        {value: 80, name: '点击'},
                        {value: 100, name: '展现'}
                    ]
                }
            ]
        };
        echart.setOption(option);
        echart.hideLoading();
    }
</script>
</html>